<template>
  <div class="m-25 mt-65">
    <div class="normal-box-mod">
      <div class="normal-box-hd clearfix">
        <div class="normal-box-title">
          <h2>社区领袋设置</h2>
        </div>
      </div>
      <div class="normal-box-bd">
        <div class="normal-list-page-mod">
          <div class="normal-list-page-hd clearfix">
            <Card>
              <div class="normal-list-page-hd clearfix">
                <Input placeholder="请输入社区名称" class="mr-10" v-model="queryData.name" style="width: 150px" />
                <Input placeholder="请输入月份" class="mr-10" v-model="queryData.month" style="width: 150px" />
                <Button type="primary" class="mr-10" custom-icon="iconfont icon-chaxun" size="small" @click='inQuire'>查询</Button>
              </div>
            </Card>
          </div>
          <div class="normal-list-page-hd clearfix">
            <Button type="primary" custom-icon="iconfont icon-fangkuai2" size="small" @click="showCreateModal" class="fr">新建</Button>
          </div>
          <div class="normal-list-page-bd">
            <Table border :loading="list.loading" :columns="list.columns" :data="list.tableData"></Table>
          </div>
          <div>
            <Page :total="queryData.totalRecord" :page-size="queryData.pageSize" :current="queryData.page" show-total
              show-elevator @on-change="changePage"></Page>
            <!-- <span style="float: right;">共{{queryData.totalRecord}}条数据</span> -->
          </div>
        </div>
        <!--新建&修改-->
        <Modal v-model="modal.lntegralSet.isShow" :loading="modal.lntegralSet.loading" :mask-closable="false" :title="modal.lntegralSet.title"
          @on-ok="postData">
          <Form ref="lntegralSetFrom" :model="modal.lntegralSet.formData" :rules="modal.lntegralSet.rules" :label-width="120">
            <FormItem label="社区名称" prop="name">
              <Input placeholder="社区名称" v-model="modal.lntegralSet.formData.name" style="width:200px;" disabled="disabled" />
            </FormItem>
            <FormItem label="月份" prop="month">
              <Input placeholder="月份" v-model="modal.lntegralSet.formData.month" style="width:200px;" disabled="disabled" />
            </FormItem>
            <FormItem label="每月领取个数" prop="garbagenum">
              <Input placeholder="请输入数字" v-model="modal.lntegralSet.formData.garbagenum" style="width:200px;" />
            </FormItem>
            <FormItem label="每月使用次数" prop="prenumber">
              <Input placeholder="请输入系统数字" v-model="modal.lntegralSet.formData.prenumber" style="width:200px;" />
            </FormItem>
          </Form>
        </Modal>
        <Modal v-model="modal.lntegralSet.thatShow" :loading="modal.lntegralSet.loading" :mask-closable="false" :title="modal.lntegralSet.title"
          @on-ok="getData" width="750">
          <Form ref="lntegralSetFrom" :model="modal.lntegralSet.formData" :rules="modal.lntegralSet.rules" :label-width="120">
            <Row type="flex" justify="start" class="code-row-bg">
              <Col span="8">
              <FormItem label="设备所在区域" v-model="modal.lntegralSet.formData.provid" prop="provid">
                <queryData @ProvinceData="formdataValue" style="width: 535px"></queryData>
              </FormItem>
              </Col>
            </Row>
            <FormItem label="请选择月份" prop="month">
              <Checkbox :indeterminate="indeterminate" :value="checkAll" @click.prevent.native="handleCheckAll" class="allCheck">全选</Checkbox>
              <CheckboxGroup v-model="modal.lntegralSet.formData.monthArray" @on-change="checkAllGroupChange">
                <Checkbox label="1">1月</Checkbox>
                <Checkbox label="2">2月</Checkbox>
                <Checkbox label="3">3月</Checkbox>
                <Checkbox label="4">4月</Checkbox>
                <Checkbox label="5">5月</Checkbox>
                <Checkbox label="6">6月</Checkbox>
                <Checkbox label="7">7月</Checkbox>
                <Checkbox label="8">8月</Checkbox>
                <Checkbox label="9">9月</Checkbox>
                <Checkbox label="10">10月</Checkbox>
                <Checkbox label="11">11月</Checkbox>
                <Checkbox label="12">12月</Checkbox>
              </CheckboxGroup>
            </FormItem>
            <FormItem label="每月领取个数" prop="garbagenum">
              <Input placeholder="请输入个数" v-model="modal.lntegralSet.formData.garbagenum" style="width:200px;" />
            </FormItem>
            <FormItem label="每月使用次数" prop="prenumber">
              <Input placeholder="请输入次数" v-model="modal.lntegralSet.formData.prenumber" style="width:200px;" />
            </FormItem>
          </Form>
        </Modal>
      </div>
    </div>
  </div>
</template>
<script>
  import gcDispenserApi from "@/api/base_sys/gcDispenser.js";
  import moment from "moment";
  import {Message} from "iview";
  import queryData from "@/view/test/cityTestZj.vue"

  export default {
    components: {
      queryData
    },
    name: "lntegralSet",
    data() {
      return {
        value: true,
        indeterminate: false,
        checkAll: false,
        month1: '',
        newSbType: {
          cityCascade: {
            data: [{
              id: '',
              name: '请选择'
            }],
            please: '',
            provid: [],
            cityid: [],
            distid: [],
            strt: [],
            commid: [],
            comminid: [],
          }
        },
        // 弹出层数据
        modal: {
          lntegralSet: {
            isShow: false,
            thatShow: false,
            flog: false,
            loading: true,
            type: "create", // create 新建，update 修改
            title: "新建",
            rules: {
              // month: [
              //   {
              //     required: true,
              //  type: 'array',
              //  min: 1,
              //  message:"请选择月份",
              //     trigger: "change"
              //   }
              // ],
              // garbagenum:[{ required: true, message: '此项不能为空', trigger: 'blur', type: 'number' }],
              garbagenum: [{
                required: true,
                message: "请填写个数",
                trigger: "blur",
                pattern: /^[a-z0-9]+$/

              }],
              prenumber:[{
                required: true,
                pattern: /^[a-z0-9]+$/,
                message: "请填写次数",
                trigger: "blur",
                // type: 'number'
              }]
            },
            formData: {
              monthArray: []
              // name: "",
              // url: "",
              // state: ""
            }
          }
        },
        // 列表
        list: {
          loading: false,
          selections: [],
          // 列表展示数据
          tableData: [],
          // 表格表头
          columns: [
            // 开始自动生成
            {
              title: "社区ID",
              key: "commid",
              align: "center",
              minWidth: 100
            },
            {
              title: "社区名称",
              key: "name",
              align: "center",
              minWidth: 100
            },
            {
              title: "月份",
              key: "month",
              align: "center",
              minWidth: 100
            },
            {
              title: "每月领取个数",
              key: "garbagenum",
              align: "center",
              minWidth: 100
            },
            {
              title: "每月使用次数",
              key: "prenumber",
              align: "center",
              minWidth: 100
            },

            {
              title: "操作",
              align: "center",
              minWidth: 130,
              render: (h, params) => {
                return h("div", {
                  class: "action-group"
                }, [
                  h(
                    'Tooltip', {
                      props: {
                        placement: 'left',
                        content: '编辑'
                      },
                      style: {
                        cursor: 'pointer'
                      }
                    },
                    [
                      h(
                        'Button', {
                          props: {
                            type: 'primary',
                            size: 'small'
                          },
                          style: {
                            marginRight: '5px',
                            padding: '1px 2px'
                          },
                          on: {
                            click: () => {
                              this.showUpdateModal(params.row)
                            }
                          }
                        },
                        [
                          h('Icon', {
                            props: {
                              type: ' iconfont icon-bianjisekuai',
                              size: 18
                            }
                          })
                        ]
                      )
                    ]
                  ),
                  h(
                    'Tooltip', {
                      props: {
                        placement: 'right',
                        content: '删除'
                      },
                      style: {
                        cursor: 'pointer'
                      }
                    },
                    [
                      h(
                        'Button', {
                          props: {
                            type: 'error',
                            size: 'small'
                          },
                          style: {
                            marginRight: '5px',
                            padding: '1px 2px'
                          },
                          on: {
                            click: () => {
                              this.delData(params.row);
                            }
                          }
                        },
                        [
                          h('Icon', {
                            props: {
                              type: ' iconfont icon-shanchusekuai',
                              size: 18
                            }
                          })
                        ]
                      )
                    ]
                  )
                ]);
              }
            }
          ]
        },
        // 页面查询数据
        queryData: {
          limit: 10,
          page: 1,
          totalRecord: 0,
          name: null,
          month: null,

        }
      };
    },
    created() {
      this.getTableData();
    },
    methods: {
      //全选
      handleCheckAll() {
        if (this.indeterminate) {
          this.checkAll = false;
        } else {
          this.checkAll = !this.checkAll;
        }
        this.indeterminate = false;
        if (this.checkAll) {
          this.modal.lntegralSet.formData.monthArray = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'];
        } else {
          this.modal.lntegralSet.formData.monthArray = [];
        }
      },
      checkAllGroupChange(data) {
        if (data.length === 12) {
          this.indeterminate = false;
          this.checkAll = true;
        } else if (data.length > 0) {
          this.indeterminate = true;
          this.checkAll = false;
        } else {
          this.indeterminate = false;
          this.checkAll = false;
        }
      },
      //城市级联
      formdataValue(formdata) {
        if (formdata.comminid == '') {
          if (formdata.commid == '') {
            if (formdata.strt == '') {
              this.modal.lntegralSet.flog = false;
            } else {
              this.modal.lntegralSet.formData.commid = formdata.strt;
              this.modal.lntegralSet.flog = true;
            }
          } else {
            this.modal.lntegralSet.formData.commid = formdata.commid
          }
        } else {
          this.modal.lntegralSet.formData.commid = formdata.comminid
        }
      },
      // 获取列表
      getTableData() {
        const that = this;
        that.queryData.totalRecord = undefined;
        gcDispenserApi.getData('/api/gcDispenserSetnum',that.queryData)
          .then(res => {
            that.list.tableData = res.data.list;
            that.queryData.totalRecord = res.data.totalRecord;
            that.queryData.limit = res.data.pageSize;
          })
          .catch(error => {
            Message.error(error);
          });
      },

      // 修改
      postData() {
        const that = this;
        this.$refs['lntegralSetFrom'].validate(valid => {
          if (valid) {
              gcDispenserApi.update('/api/gcDispenserSetnum',that.modal.lntegralSet.formData)
                .then(res => {
                  that.modal.lntegralSet.isShow = false;
                  // that.modal.lntegralSet.loading = false;
                  if (!res.code) {
                    that.getTableData();
                    that.$Notice.success({
                      title: "保存成功!"
                    });
                  } else {
                    that.$Notice.error({
                      title: res.message
                    });
                  }
                })
                .catch(error => {
                  Message.error(error);
                });
          } else {
            that.modal.lntegralSet.loading = false
            that.$nextTick(() => {
              that.modal.lntegralSet.loading = true
            })
          }
        })
      },

      // 删除
      delData(data) {
        this.$Modal.confirm({
          title: "确认删除",
          content: "<p>您确认删除 <strong>" +
            data.name.toString() + data.month +
            "</strong>月的记录吗?</p><p>删除后将无法撤销，请谨慎操作！</p>",
          loading: true,
          onOk: () => {
            gcDispenserApi.del('/api/gcDispenserSetnum/',data).then(res => {
              this.$Modal.remove();
              if (!res.code) {
                this.$Notice.success({
                  title: "删除成功"
                });
                this.queryData.page = 1;
                this.getTableData();
              } else {
                this.$Notice.error({
                  title: res.message
                });
              }
            });
          }
        });
      },
      //新建
      getData() {
        if (this.modal.lntegralSet.flog == true) {
          // console.log(this.modal.lntegralSet.formData.commid)
          const that = this;
          that.$refs["lntegralSetFrom"].validate(valid => {
            if (valid) {
              gcDispenserApi.add('/api/gcDispenserSetnum',that.modal.lntegralSet.formData)
              .then(res => {
                that.modal.lntegralSet.thatShow = false;
                // that.modal.lntegralSet.loading = false;
                // console.log(that.modal.lntegralSet.formData)
                if (!res.code) {
                  that.getTableData();
                  that.$Notice.success({
                    title: "保存成功!"
                  });
                } else {
                  that.$Notice.error({
                    title: res.message
                  });
                }
              })
            } else {
              that.modal.lntegralSet.loading = false;
              that.$nextTick(() => {
                that.modal.lntegralSet.loading = true;
              });
            }
          });
        } else {
          const that = this;
          that.modal.lntegralSet.loading = false;
          that.$nextTick(() => {
            that.modal.lntegralSet.loading = true;
          });
          this.$Message.warning('地址至少要选择到街道才能提交');

        }
      },
      // 查询
      inQuire() {
				this.queryData.page=1;
        this.getTableData();
      },

      // 全选，不全选
      selectionChange(args) {
        this.list.selections = args;
      },

      //每页显示记录数变更
      onPageSizeChange(pageSize) {
        this.queryData.limit = pageSize;
        this.getTableData();
      },

      // 换页
      changePage(page) {
        this.queryData.page = page;
        this.getTableData();
      },

      // 显示新建弹窗
      showCreateModal() {

        this.modal.lntegralSet.type = "create";
        this.modal.lntegralSet.title = "新建";
        this.modal.lntegralSet.formData = {};
        this.modal.lntegralSet.thatShow = true;

      },

      // 显示修改弹窗
      showUpdateModal(id) {
        this.modal.lntegralSet.type = "update";
        this.modal.lntegralSet.title = "修改";
        const that = this;
        gcDispenserApi.getData('/api/gcDispenserSetnum/queryOne',id).then(res => {
            that.modal.lntegralSet.formData = res.data;
            that.modal.lntegralSet.isShow = true;
          })
          .catch(error => {
            Message.error(error);
          });
          // this.modal.lntegralSet.isShow = true;
      },

    },

  };
</script>
